import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { AppState } from "@store/index";

// 定义一个接口，用于描述每个频道的新闻数据结构
interface ChannelNews {
  [cid: string]: ChannelNewsItem; // 使用频道ID作为键，对应的新闻项作为值
}

// 定义一个接口，用于描述单个频道的新闻项数据结构
interface ChannelNewsItem {
  results: News[]; // 新闻列表
  pre_timestamp: string | null; // 用于获取下一页数据的时间戳
  distance: number; // 用于记录当前频道对应的新闻列表的滚动位置
}

// 定义初始状态，类型为ChannelNews
const initialState: ChannelNews = {};

export const newsSlice = createSlice({
  name: "news", // 切片的名称
  initialState, // 切片的初始状态
  reducers: {
    // 保存新闻列表的reducer
    // 参数action的PayloadAction类型定义了payload的结构
    saveNews(
      state,
      action: PayloadAction<{
        cid: string; // 频道id
        results: News[]; // 要保存的新闻列表
        pre_timestamp: string; // 获取下一页数据需要的时间戳
      }>
    ) {
      const { cid, results, pre_timestamp } = action.payload;

      if (typeof state[cid] === "undefined") {
        // 如果是第一次存储该频道的新闻，则直接赋值
        state[cid] = {
          results,
          pre_timestamp,
          distance: 0, // 初始滚动位置为0
        };
      } else {
        // 如果不是第一次存储，则累加新闻列表，并更新时间戳
        state[cid].results = [...state[cid].results, ...results];
        state[cid].pre_timestamp = pre_timestamp;
      }
    },
    // 保存新闻列表的滚动位置的reducer
    saveDistance(
      state,
      action: PayloadAction<{ cid: string; distance: number }> // 参数包含频道id和滚动位置
    ) {
      // 更新指定频道的滚动位置
      state[action.payload.cid].distance = action.payload.distance;
    },
  },
});

// 选择器函数，用于从全局状态中获取指定频道的新闻数据
export const selectChannelNews =
  (cid: string) =>
  (state: AppState): undefined | ChannelNewsItem => {
    return state.news[cid]; // 返回指定频道的新闻数据
  };

// 导出actions以供使用
export const { saveNews, saveDistance } = newsSlice.actions;